<template>
	<div class="flex items-center justify-center h-screen">
		<div class="flex-auto w-full max-w-4xl">
			<div class="flex flex-wrap">
				<div class="w-1/2">
					<a-upload-dragger
						v-model:fileList="fileList"
						name="file"
						:disabled="isLoading"
						:before-upload="beforeUpload"
						:custom-request="customRequest"
						:show-upload-list="true"
						:multiple="false"
						@change="handleChange"
					>
						<p class="ant-upload-drag-icon">
							<InboxOutlined></InboxOutlined>
						</p>
						<p class="text-white">点击或拖拽到这块区域以上传,支持mp3,mp4,m3u8</p>
						<p class="text-white">支持单次或批量上传。严禁上传违规数据</p>
					</a-upload-dragger>
				</div>
				<div class="w-1/2 p-4">
					<h1 class="text-2xl font-bold mb-4">标题</h1>
					<input
						v-model="title"
						type="text"
						class="w-full p-2 mb-4 border rounded text-slate-900"
						placeholder="请输入标题"
					/>
					<h2 class="text-xl font-bold mb-4">描述</h2>
					<textarea
						v-model="description"
						class="w-full p-2 mb-4 border rounded text-slate-900"
						rows="4"
						placeholder="请输入描述"
					></textarea>
					视频类型
					<div class="flex justify-between">
						<a-select
							v-model:value="selectdVideoType"
							style="width: 120px"
							:options="videoTypes"
							@change="handleSelectChange"
						></a-select>
						<a-button type="primary" @click="handleUpload">上传</a-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { InboxOutlined } from '@ant-design/icons-vue'
	import { push } from 'notivue'
	import type { UploadChangeParam, SelectProps } from 'ant-design-vue'
	import { _createVideo } from '@/api/video'
	import { useRouter } from 'vue-router'
	import { FileType } from 'ant-design-vue/es/upload/interface'
	const router = useRouter()
	const fileList = ref([] as any[])
	const title = ref('')
	const description = ref('')

	const isLoading = ref(false)
	const customRequest = (options: any) => {
		let progress = { percent: 1 }
		let speed = 100 / (options.file.size / 65000)
		const intervalId = setInterval(() => {
			if (progress.percent < 100) {
				progress.percent += speed
				options.onProgress(progress)
			} else {
				clearInterval(intervalId)
			}
		}, 100)
	}
	const selectdVideoType = ref('mp4')
	const videoTypes = ref<SelectProps['options']>([
		{
			value: 'mp4',
		},
		{
			value: 'mkv',
		},
		{
			value: 'flv',
		},
		{
			value: 'webrtc',
			disabled: true,
		},
	])
	const handleSelectChange = (value: string) => {
		selectdVideoType.value = value
		fileList.value = []
	}

	const handleChange = (info: UploadChangeParam) => {
		const status = info.file.status
		if (status !== 'uploading') {
			console.log(info.file, info.fileList)
		}
		if (status === 'done') {
			push.success({
				title: '上传成功',
				message: `${info.file.name} 文件上传成功.`,
			})
		} else if (status === 'error') {
			push.error({
				title: '失败',
				message: `${info.file.name} 文件上传失败.`,
			})
		}
	}

	const beforeUpload = (file: FileType) => {
		fileList.value = []
		isLoading.value = true
		const fileName = file.name
		const lastDotIndex = fileName.lastIndexOf('.')
		const fileType = fileName.substring(lastDotIndex + 1)
		if (['mkv', 'mp4'].includes(fileType)) {
			selectdVideoType.value = fileType
			isLoading.value = false
			push.success({
				message: `自动识别文件后缀${fileType}`,
			})
		}
	}
	const handleUpload = async () => {
		if (!title.value) {
			push.error({
				title: '错误',
				message: '视频标题不能为空',
			})
			return
		}
		if (!description.value) {
			push.error({
				title: '错误',
				message: '视频描述不能为空',
			})
			return
		}
		let uploadfile: any
		if (fileList.value && fileList.value.length > 0) {
			const file = fileList.value[0]
			if (file && file.originFileObj) {
				uploadfile = file.originFileObj
			} else {
				push.error({
					title: '错误',
					message: '文件对象不完整',
				})
				return
			}
		} else {
			push.error({
				title: '错误',
				message: '未选择文件',
			})
			return
		}

		_createVideo({
			file: uploadfile,
			title: title.value,
			description: description.value,
			videoType: selectdVideoType.value,
		}).then((data) => {
			push.success({
				title: '上传成功',
				message: `${uploadfile.fileName} 文件上传成功.`,
			})
			router.push('/video/' + String(data))
		})
	}
</script>
